<template>
	<layer-box ref="layer" overlay-style="background: rgba(0, 0, 0, 0.50);backdrop-filter: blur(8.3px);" width="652px" height="555px">
		<view class="content">
			<view class="hd uv-flex-row">
				<icon-set></icon-set>
				<uv-text text="设置" color="#fff" size="20px" margin="-4px 0 0 5px"></uv-text>
			</view>
			<tab @change="tabChange" />
			<view class="tab-content">
				<tab-audio v-if="selectedIndex == 0" />
				<tab-shortcut v-if="selectedIndex == 1" />
				<tab-course v-if="selectedIndex == 2" />
			</view>
		</view>
	</layer-box>
</template>
<script setup>
	import { defineComponent, ref } from 'vue';
	import tab from './tab.vue';
	import tabAudio from './tab-audio.vue';
	import tabShortcut from './tab-shortcut.vue';
	import tabCourse from './tab-course.vue';
	defineComponent({ tab, tabAudio, tabShortcut, tabCourse });
	const layer = ref(null);
	const selectedIndex = ref(0);

	function tabChange(index) {
		selectedIndex.value = index;
	}

	function open() {
		layer.value.open();
	}

	function close() {
		layer.value.close();
	}
	defineExpose({ open, close });
</script>
<style scoped lang="scss">
	.content {
		padding: 20px;
		.hd {
			padding: 12px 0;
			align-items: center;
		}
		.tab-content {
			position: relative;
			min-height: 365px;
			margin: 10px 0;
			border-radius: 4px;
			border: 1px solid #474759;
			background: #1C1C23;
		}
	}
</style>